<template>
  <!-- // 组件化思想：把一个完整的页面，拆成一个一个小组件 -->
  <!-- 每一个组件内部都有结构。样式。行为 -->
  <!-- template就是vue组件中的结构部分 -->
  <!-- template中有且只有一个根元素（div） -->
  <div>
    <!-- <div class="father"><span>我的父亲{{fatherAge}}岁</span>
      <div class="son">{{sonaAge>24?'星际打一把少一把':'怕什么'}}</div>
    </div>
    <div class="box">人族最强枪兵{{sc2.name.toUpperCase()}}</div>
    <div class="box">年龄{{sc2.age*2}}岁</div> -->
    <!-- <input type="checkbox" :checked=status><span>多选框</span>
    <button v-on:click="num += 1">按钮</button><p>{{num}}</p>
    <button v-on:click="fn1()">按钮</button>
  <button v-on:click="fn(12)">按钮</button> -->
        <button @click="fn1(3000)">发工资啦，我的工资是3000</button>
        <button @click="fn1(-2800)">给喜欢的女主播刷了火箭-2800</button>
        <button @click="fn1(10000)">送外卖赚了10000</button>
        <button @click="fn1(-18000)">给暗恋的女生买了爱马仕-18000</button>
        <button @click="fn1(8000)">晚上去做代驾赚了8000</button>
        <button @click="fn1(-100)">买泡面100</button>
        <button @click="fn1(-50)">买挂逼水50</button>

        <p>剩余{{num}}元存银行</p>
<!-- <form action="http://www.itcast.cn" >

            <input type="text">

            <button @click.prevent.stop="fn()">提交</button>
            
        </form>
    <div>{{str}}</div>
    <button @click="fn()">逆转未来</button> -->
  <!-- <img src="./assests/fad0655d562969bfe7380db7b3b3ab7.jpg" alt="" v-show="flag">
    <button @click=fn3()>点击隐藏</button>

    <div v-if="age=60?true:false">60岁以上，唱跳rap</div>
    <div v-else-if="age>=30?true:false">30岁以上，抽烟喝酒烫头</div>
    <div v-else-if="age>=20?true:false">20岁以上，煮茶焚香下棋</div>
    <div v-else-if="age<20?true:false">20岁以下，练习广场舞</div> -->
    <!-- <form @submit.prevent>
        <input type="text" name="username" v-model="form.username">

        <input type="text" name="password" v-model="form.password">

        <button @click="fn4()">提交</button>
        <input type="text" v-model="msg">
    </form> -->
  </div>
</template>

<script>

// script这部分就是行为部分，js代码写在这里
// vue组件的核心代码：可以导出vue组件

export default {
  data(){
    return {
      // fatherAge:47,
      // sonaAge:23,
      // sc2:{
      //   name:'tks',
      //   age:42
      // },
      // num:0,
      // status:true,
      // str:'hellow,world',
      // flag:true,
      // age:22
      msg:'杭州的第一场雪',
      form:{
        username:'',
        password:''
      }
    }
  },
  methods:{
    fn1(){
     console.log(2);
    },
    fn(){
      this.str=this.str.split('').reverse().join('')
    },
    fn2(e){
      e.preventDefault()
    },
    fn3(){
      this.flag=!this.flag
    },
    fn4(){
      console.log(this.form.username);
      console.log(this.form.password);
    }
  }
}
</script>

<style lang="less">
/* style这部分就是样式部分，css代码写在这里 */
.father{
  color: red;
  .son{
    color: blue;
  }
}
.box{
  color: pink;
  font-size: 45px;
}
</style>
